<template>
	<view>
		<view class="ul">
			<view class="li" v-for="(item,index) in list" :key="index" :style="liStyle(item)" :id="`li_id_${index+1}`">
				<image :class="['img',{'img-error':item.error},{'img-success':item.success}]" :src="item.show?item.url:loadImage" mode="widthFix" @load="imgLoaded(item)" @error="imgError(item)"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				column: 2,
				col: {},
				space: 10,
				list: [],
				winHeight: uni.getSystemInfoSync().windowHeight
			}
		},
		onLoad() {
			this.load();
		},
		computed: {
			loadImage() {
				return '../../static/load.png'
			}
		},
		onPageScroll(e) {
			this.timer && clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.loadNew();
			}, 100)
		},
		methods: {
			load() {
				let colors = ['FFB61', 'FF00FF', '2878ff', '00CED1', 'FFD700', 'C0C0C0', 'dddddd', 'f0f0f0', 'f5f4f3', 'ff0000', 'ff0808'],
					wh = [100, 60, 80, 300, 200, 120, 500, 400, 260, 350, 302],
					newArr = [];
				for (let i = 0; i < 1; i++) {
					var url = `https://via.placeholder.com/100x${wh[i]}.png/${colors[i]}`;
					// newArr.push({ show: false, loaded: false, url: url });
					this.set({ show: false, loaded: false, url: url });
				}
				// this.list.push(...newArr);
				// console.log(this.list)
				// this.$nextTick(() => {
				// 	this.loadNew();
				// })
			},
			set(o) {
				let min = 0,
					col = 0;
				for (let i = this.column; i >= 1; i--) {
					const v = this.col[`colHeight_${i}`] ? this.col[`colHeight_${i}`] : 0;
					if (v <= min) {
						min = v;
						col = i;
					}
				}
				o.column = col;
				this.list.push(o);
				console.log('col', this.list)
			},
			liStyle(item) {
				const { windowWidth } = uni.getSystemInfoSync();
				const w = (windowWidth / this.column) - (this.column + 1) * this.space;
				const left = (item.column - 1) * w + this.space;
				console.log(left)
				return {
					width: `${w}px`,
					left: `${left}px`
				}
			},
			async loadNew() {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].show) continue;
					const isShow = await this.isShow(`li_id_${i+1}`);
					// console.log(isShow,i)
					this.list[i].show = isShow;
				}
			},
			isShow(id) {
				let that = this;
				return new Promise((reslove, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#${id}`).boundingClientRect(data => {
						const result = (data.top - data.height) <= that.winHeight;
						console.log(data, data.height);
						reslove(result);
					}).exec();
				})
			},
			imgError(item) {
				item.error = true;
			},
			imgLoaded(item) {
				item.success = true;
			},
			getRdom(arr = [], rate = 10) {
				return Math.floor(Math.random() * rate) + arr.length;
			}
		}
	}
</script>
<style scoped lang="scss">
	.ul {
		position: relative;

		.li {
			position: absolute;
			left: 0;
			top: 0;

			.img {
				width: 100%;
				background: #f2f5f9 url(@/static/loading.png) no-repeat center center;

				&-error {
					background: #f2f5f9 url(@/static/error.png) no-repeat center center;
				}
			}
		}
	}
</style>
